<template>
	<view class="dialogBox">
		<view class="dialog">
			<view class="dialog-head">
				{{title}}
			</view>
			<view class="dialog-content">
				<slot name="content"></slot>
			</view>
			<view v-if="!slotFoot" class="dialog-footer">
				<view class="dialog-cancel dialog-btn" v-if="cancelShow" @click="cancel">{{cancelText}}</view>
				<view class="dialog-submit dialog-btn" @click="submit">{{okText}}</view>
			</view>
			<slot v-else name="footer" class="dialog-footer">
			</slot>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			title: {
				type: String,
				value: '提示',
			},
			cancelShow: {
				type: Boolean,
				value: true,
			},
			cancelText: {
				type: String,
				value: '取消',
			},
			okText: {
				type: String,
				value: '确认',
			},
			slotFoot: {
				type: Boolean,
				value: false,
			}
		
		},
		data() {
			return {

			}
		},
		methods: {
			submit() {
				this.$emit('submit')
				// this.triggerEvent('submit', {})
			},
			cancel() {
				this.$emit('cancel')
				// this.triggerEvent('cancel', {})
			}
		}
	}
</script>

<style scoped lang="scss">
	.dialogBox {
		width: 100vw;
		height: 100vh;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 999;
		background-color: rgba(0, 0, 0, .5);
	}

	.dialog {
		width: 80vw;
		border-radius: 20rpx;
		background-color: #fff;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}

	.dialog-head {
		width: 100%;
		padding: 32rpx 0 0;
		color: #333333;
		font-size: 32rpx;
		box-sizing: border-box;
		font-weight: bold;
		text-align: center;
		font-family: PingFangSC-Semibold, PingFang SC;
	}

	.dialog-content {
		width: 100%;
		padding: 32rpx 68rpx 40rpx;
		box-sizing: border-box;
	}

	.dialog-footer {
		width: 100%;
		padding: 0rpx 0 32rpx 28rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

	.dialog-btn {
		flex: 1;
		height: 74rpx;
		padding: 0 62rpx;
		border-radius: 38rpx;
		border: 1rpx solid #aaa;
		margin-right: 28rpx;
		box-sizing: border-box;
		font-size: 28rpx;
		box-sizing: border-box;
		font-family: PingFangSC-Regular, PingFang SC;
		color: #333;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.dialog-submit {
		background-color: $theme-color;
		border: 1rpx solid $theme-color;
	}
</style>